<template>
  <div class="item" v-loading.fullscreen.lock="this.$store.state.loading">

    <div class="item-search">
      <el-collapse>
        <el-collapse-item name="1">
          <template slot="title">
            <el-button type="primary">搜索</el-button>
          </template>
          <div class="item-search-input">
            <el-row>
              <el-col :span="4">
                <el-input v-model="searchData.carryCode" placeholder="车牌号/闸机号" class="item-search-input-l" @keyup.enter.native="search"></el-input>
              </el-col>
              <el-col :span="4">
                <el-input v-model="searchData.deviceId" placeholder="设备编号" class="item-search-input-l" @keyup.enter.native="search"></el-input>
              </el-col>
              <el-col :span="4">
                <el-input v-model="searchData.carryNo" placeholder="自编号" class="item-search-input-l" @keyup.enter.native="search"></el-input>
              </el-col>
              <el-col :span="4">
                <el-input v-model="searchData.lineShort" placeholder="线路短号" class="item-search-input-l" @keyup.enter.native="search"></el-input>
              </el-col>
              <el-col :span="4">
                <el-input v-model="searchData.localCompanyName" placeholder="公司" class="item-search-input-l" @keyup.enter.native="search"></el-input>
              </el-col>
              <el-col :span="4">
                <el-input v-model="searchData.localDepartmentName" placeholder="分公司" class="item-search-input-l" @keyup.enter.native="search"></el-input>
              </el-col>
              <el-col :span="4">
                <el-select v-model="searchData.supplier" @multiple="true" clearable allow-create placeholder="厂商" class="item-search-input-l" @keyup.enter.native="search">
                  <el-option v-for="(item,index) in this.$store.state.deviceSupplier" :label="item.label" :value="item.value" :key="index"></el-option>
                </el-select>
              </el-col>
              <el-col :span="6">
                <el-date-picker v-model="dateTimeScope" type="datetimerange" placeholder="选择时间范围" :editable="false" class="item-search-input-l" @keyup.enter.native="search" @input="dateTimeScopeChange"></el-date-picker>
              </el-col>
              <el-col :span="1">
                <el-button type="primary" icon="search" @click="search"></el-button>
              </el-col>
              <el-col :span="1">
                <el-button type="primary" icon="delete" @click="reset"></el-button>
              </el-col>
            </el-row>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>

    <div class="item-table">

      <div class="item-table-title">
        <h2>{{ this.$store.state.tableTitle.big }}<span>{{ this.$store.state.tableTitle.small }}</span></h2>
        <div class="item-table-add">
          <!--<a :href="hrefExcel" target="_blank"><el-button type="primary" icon="upload">导出</el-button></a>
          <el-button type="primary" @click="toggle === false ? toggle = true : toggle = false">{{ toggle === false ? '切换到图表' : '切换到列表' }}</el-button>-->
        </div>
      </div>

      <!--列表-->
      <div class="item-table-main" v-show="!toggle">
        <el-table :data="tableData" border>
          <el-table-column v-for="(item,index) in table" :label="item.label" :key="index" :sortable="item.sortable ? true : false" :prop="item.name">
            <template scope="scope">
              <span :title="scope.row[item.name]">{{ scope.row[item.name] }}</span>
            </template>
          </el-table-column>
        </el-table>

        <div class="item-pagination">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="this.$store.state.page.pageNum"
            :page-size="this.$store.state.page.pageSize"
            layout="prev, pager, next, jumper, total"
            :total="this.$store.state.page.total">
          </el-pagination>
        </div>
      </div>
      <!--列表-->

      <!--图表-->
      <div class="item-total" v-show="toggle">
        <div id="nHeartTotal" :style="screenHeight"></div>
      </div>
      <!--图表-->

    </div>


  </div>
</template>

<script type="text/ecmascript-6">
  import Draw from './js/Draw'
  export default {
    data () {
      return {
        hrefExcel: '',
        companyId: localStorage.getItem('companyId'),
        dateTimeScope: [],
        searchData: {  // 搜索数据
          carryCode: '',
          deviceId: '',
          carryNo: '',
          lineShort: '',
          localCompanyName: '',
          localDepartmentName: '',
          supplier: '',
          startTime: '',
          endTime: ''
        },
        companyOptions: [],
        table: [
          { label: '车牌/闸机号', name: 'carryCode' },
          { label: '自编号', name: 'carryNo' },
          { label: '设备号', name: 'deviceId' },
          { label: '线路短号', name: 'lineShort' },
          { label: '线路名称', name: 'lineName' },
          { label: '公司', name: 'localCompanyName' },
          { label: '分公司', name: 'localDepartmentName' },
          { label: '厂商', name: 'suppilerName' },
          { label: '心跳次数', name: 'count', sortable: true },
          { label: '最后心跳时间', name: 'updateTime', sortable: true }
        ],
        tableData: [],
        toggle: false,
        screenHeight: {
          height: window.innerHeight - 70 - 45 - 57 - 45 + 'px'
        }
      }
    },
    mounted () {
      this.Result({params: { companyId: this.companyId }})
      // this.hrefExcel = this.api.nHeart.excel + '?companyId=' + localStorage.getItem('companyId') // 写入导出
    },
    methods: {
      Result (formData) { // 页面初始化
        let that = this
        that.$store.commit('setLoading', true)
        that.$axios.get(that.api.nHeart.result, formData || {}).then((res) => {
          if (res.data.msg.code === '20000') {
            let data = res.data.data.heartDateList
            let page = res.data.page
            for (let i = 0; i < data.length; i++) {
              res.data.data.heartDateList[i].suppilerName = that.getSupplier(data[i].supplier) === undefined ? '' : that.getSupplier(data[i].supplier)
            }
            that.tableData = data
            that.$store.commit('setPage', page)
          } else if (res.data.msg.code === '40001') {
            that.tableData = []
            that.$store.commit('clearPage')
            that.$message({type: 'error', message: res.data.msg.message})
          } else {
            that.$store.commit('clearPage')
            that.$message({type: 'error', message: '网络异常'})
          }
          that.$store.commit('setLoading', false)
        }).catch((err) => {
          if (err) throw err
          that.$message({type: 'error', message: '网络异常'})
          that.$store.commit('setLoading', false)
        })
      },
      drawResult (fromData) {
        let that = this
        let axios = that.$axios
        let url = that.api.nHeart.result

        that.$store.commit('setLoading', true)

        axios.all([
          axios.get(url, that.toParams(fromData || {}, 1)), // 立方
          axios.get(url, that.toParams(fromData || {}, 2)), // 易华录
          axios.get(url, that.toParams(fromData || {}, 3)), // 华捷
          axios.get(url, that.toParams(fromData || {}, 4)), // 雄帝
          axios.get(url, that.toParams(fromData || {}, 5)), // 天津磁卡
          axios.get(url, that.toParams(fromData || {}, 6))  // 公用电子
        ]).then(axios.spread((res1, res2, res3, res4, res5, res6) => {
          let legendArr = ['立方', '易华录', '华捷', '雄帝', '天津磁卡', '公用电子']
          let dataArr = []
          if (res1.data.msg.code === '20000') {
            dataArr.push(res1.data.page.total)
          }
          if (res2.data.msg.code === '20000') {
            dataArr.push(res2.data.page.total)
          }
          if (res3.data.msg.code === '20000') {
            dataArr.push(res3.data.page.total)
          }
          if (res4.data.msg.code === '20000') {
            dataArr.push(res4.data.page.total)
          }
          if (res5.data.msg.code === '20000') {
            dataArr.push(res5.data.page.total)
          }
          if (res6.data.msg.code === '20000') {
            dataArr.push(res6.data.page.total)
          }
          Draw(that.$echart, legendArr, dataArr)
          that.$store.commit('setLoading', false)
        }))
      },
      search () { // 搜索
        let that = this
        let searchData = that.searchData
        let toggle = that.toggle
        let params = {
          params: {
            carryCode: encodeURIComponent(searchData.carryCode),
            deviceId: encodeURIComponent(searchData.deviceId),
            carryNo: encodeURIComponent(searchData.carryNo),
            lineShort: encodeURIComponent(searchData.lineShort),
            localCompanyName: encodeURIComponent(searchData.localCompanyName),
            localDepartmentName: encodeURIComponent(searchData.localDepartmentName),
            supplier: searchData.supplier,
            startTime: encodeURIComponent(searchData.startTime),
            endTime: encodeURIComponent(searchData.endTime),
            companyId: that.companyId
          }
        }
        that.hrefExcel = that.api.nHeart.excel + that.toHash(params['params']) // 调用json转换成字符串连接hash函数
        if (toggle === false) {
          that.Result(params)
        } else {
          that.drawResult(params.params)
        }
      },
      reset () { // 清空
        let that = this
        let searchData = that.searchData
        searchData.carryCode = ''
        searchData.deviceId = ''
        searchData.carryNo = ''
        searchData.lineShort = ''
        searchData.localCompanyName = ''
        searchData.localDepartmentName = ''
        searchData.supplier = ''
        searchData.startTime = ''
        searchData.endTime = ''
        that.dateTimeScope = []
      },
      handleCurrentChange (val) { // 分页
        let that = this
        let searchData = that.searchData
        let params = {
          params: {
            carryCode: encodeURIComponent(searchData.carryCode),
            deviceId: encodeURIComponent(searchData.deviceId),
            carryNo: encodeURIComponent(searchData.carryNo),
            lineShort: encodeURIComponent(searchData.lineShort),
            localCompanyName: encodeURIComponent(searchData.localCompanyName),
            localDepartmentName: encodeURIComponent(searchData.localDepartmentName),
            supplier: searchData.supplier,
            startTime: encodeURIComponent(searchData.startTime),
            endTime: encodeURIComponent(searchData.endTime),
            pageNum: val,
            companyId: that.companyId
          }
        }
        that.Result(params)
        console.log('当前第' + val + '页')
      },
      dateTimeScopeChange (val) {
        console.log(val)
        this.searchData.startTime = this.updateTime(val[0])
        this.searchData.endTime = this.updateTime(val[1])
      },
      toParams (fromData, data) {
        let obj = {
          params: { supplierCode: data }
        }
        for (let item in fromData) {
          obj.params[item] = fromData[item]
        }
        return obj
      }
    },
    watch: {
      toggle: function (val) {
        let that = this
        if (val === true) {
          that.reset()
          that.drawResult({ companyId: this.companyId })
        } else {
          that.reset()
          that.Result({params: { companyId: this.companyId }})
        }
      }
    }
  }
</script>
